<template>
  <div class="left_index">
    <div class="left_logo">
      <span class="logo_span"><img :src="mainModel.logo" alt="模块logo"></span>
      <span class="module_name">{{mainModel.name}}</span>
      <span v-if="modelNo === 0" class="model_gold_txt">*金额以万元为单位,注册人数以个人为单位</span>
    </div>
    <!-- left_logo -->
    <div v-if="modelNo === 1" class="left_col_system">
      <div class="left_col_3">
        <span class="left_col_name">注册用户数(人)</span>
        <span class="left_col_count">{{modelObj.registerCount}}</span>
      </div>
      <!-- left_col_3 -->
      <div class="left_col_3">
        <span class="left_col_name">总投资(万元)</span>
        <span class="left_col_count">{{modelObj.investTotalCount}}</span>
      </div>
      <!-- left_col_3 -->
      <div class="left_col_3">
        <span class="left_col_name">总返利(万元)</span>
        <span class="left_col_count">{{modelObj.backTotalCount}}</span>
      </div>
      <!-- left_col_3 -->
    </div>
    <!-- left_col_system -->

    <div v-if="modelNo === 2" class="left_col_system">
      <div class="left_col_4">
        <span class="left_col_name">注册用户数(人)</span>
        <span class="left_col_count">{{modelObj.registerCount}}</span>
      </div>
      <!-- left_col_4 -->
      <div class="left_col_4">
        <span class="left_col_name">今日订单(个)</span>
        <span class="left_col_count">{{modelObj.todayOrderCount}}</span>
      </div>
      <!-- left_col_4 -->
      <div class="left_col_4">
        <span class="left_col_name">总返利(元)</span>
        <span class="left_col_count">{{modelObj.backTotal}}</span>
      </div>
      <!-- left_col_4 -->
      <div class="left_col_4">
        <span class="left_col_name">总提现(元)</span>
        <span class="left_col_count">{{modelObj.withdrawTotal}}</span>
      </div>
      <!-- left_col_4 -->
    </div>
    <!-- left_col_system -->
    <div class="model_echarts">
      <!-- 七日投资 -->
      <span class="col_2"><line-bar :eData="echartsObj[0]"></line-bar></span>
      <span class="col_2"><line-bar :eData="echartsObj[1]"></line-bar></span>
    </div>
    <!-- model_echarts -->
  </div>
</template>

<script>
import LineBar from './bar/lineBar';

export default {
  props: {
    mainModel: {
      type: Object,
      default: () => {
        return null
      }
    },
    modelNo: {
      type: Number,
      default: () => {
        return 0
      }
    },
    modelObj: {
      type: Object,
      default: () => {
        return null
      }
    },
    echartsObj: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    LineBar
  },
  data () {
    return {
      // userStyle: "{width: 100%,height: 2.6rem}"
    }
  }
}
</script>

<style lang="less" scoped>
  .left_index{
    background: #222943;
    border-radius: 10px;
    .left_logo{
      position: relative;
      padding-left: 1.14rem;
      width:  auto;
      height: 0.98rem;
      .logo_span{
        position: absolute;
        top: 0.22rem;
        left: 0.44rem;
        z-index: 1;
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        img{
          display: block;
          width: 100%;
          height: auto;
        }
      }
      .module_name{
        float: left;
        display: block;
        font-size: 0.36rem;
        color: #fff;
        line-height: 0.98rem;
      }
      .model_gold_txt{
        float: left;
        display: block;
        margin-left: 0.15rem;
        font-size: 0.16rem;
        line-height: 1.1rem;
        color: #ffee6e;
      }
    }
    // 栅栏系统
    .left_col_system{
      clear: both;
      display: flex;
      display: -webkit-flex;
      overflow: hidden;
      height: 0.92rem;
      .left_col_3, .left_col_4{
        .left_col_count{
          color: #fff;
        }
        flex-direction: row;
        flex-basis: 33.33333333%;
        align-content: flex-start;
        &>span{
          display: block;
          color: #a5a6a4;
          text-align: center;
        }
        &>span.left_col_name{
          font-size: 0.18rem;
          line-height: 0.62rem;
        }
        &>span.left_col_count{
          color: #fff;
          font-size: 0.26rem;
          line-height: 0.28rem;
          font-weight: 400;
        }
      }
      .left_col_4{
        flex-basis: 25%;
      }
    }
    .model_echarts{
      padding-left: 0.44rem;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      width: auto;
      height: 3.06rem;
      .col_2{
        padding: 0 0.15rem;
        flex-basis: 50%;
      }
    }
  }
</style>
